<template>
    
    <div>
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <h1>表单名称</h1>
                <el-input style="width:55%;" v-model="formName" placeholder="请输入表单名称"></el-input>
                <br/>
            </div>
            <!-- 题目列表 -->
            <div v-for="item in count" :key="item">
              <el-card class="box-card" shadow="hover">
                <!-- 填空题 -->
                <div v-for="(item0,index0) in blockArray" :key="'0'+(item0,index0)">
                  <div v-if="item0.index==item">
                    {{ item }}、填空题<br/><br/>
                    题目名&nbsp;
                    <el-input v-model="item0.topic" style="width:55%;" placeholder="请输入题目名"></el-input>
                    <br/>
                    <br/>
                    <el-input v-model="item0.content" style="width:65%;" type="textarea" placeholder="请输入内容"></el-input>&nbsp;
                            <br/>
                            <br/>
                            <el-button type="danger" icon="el-icon-delete" plain @click="DelBlock(index0)">删除问题</el-button>
                            <br/>
                        </div>
                    </div>
                <!-- 选择题 -->
                <div v-for="(item1,index1) in chooseArray" :key="'1'+(item1,index1)" >
                  <div v-if="item1.index==item">
                      {{ item }}、选择题&nbsp;
                      <el-button icon="el-icon-plus" plain @click="AddChoice(index1)">增加选项</el-button>&nbsp;
                    <el-switch v-model="item1.single" active-text="多选" inactive-text="单选"></el-switch>
                      <br/>
                      <br/>
                      题目名&nbsp;
                      <el-input  v-model="item1.topic" style="width:55%;" placeholder="请输入要调查的意见题目"></el-input>
                      <br/>
                      <br/>
                      <div v-for="(item2,index2) in chooseArray[index1].choice" :key="(item2,index2)">
                          选项&nbsp;{{ index2+1 }}
                        <el-input v-model="chooseArray[index1].choice[index2]" placeholder="请输入选项描述"
                                  style="width:55%;"></el-input>&nbsp;
                        <el-button plain icon="el-icon-delete" @click="DelChoice(index1,index2)">删除选项</el-button>
                        <br/>
                        <br/>
                      </div>
                    <el-button type="danger" icon="el-icon-delete" plain @click="DelChoose(index1)">删除问题
                    </el-button>
                  </div>
                </div>
              </el-card>
              <br/>
            </div>
          <el-button plain icon="el-icon-plus" @click="AddBlock">增加填空题</el-button>&nbsp;
          <el-button plain icon="el-icon-plus" @click="AddChoose">增加选择题</el-button>
        </el-card>
      <el-button plain icon="el-icon-bottom" @click="SaveForm">保存</el-button>
      <el-button type="success" icon="el-icon-s-promotion">发布表单</el-button>
    </div>
    <!---->
</template>

<script>
  //导入接口
  import {saveForm} from "@/api/main.js";//保存表单的接口

  export default {
    data() {
      return {
        formName: "",//表单名称
        count: 0,//题目数量
        blockArray: [],//填空题数组
        chooseArray: [],//选择题数组
        questionArray:[]//所有题目数组

      }
    },
    methods: {
        //type: 0填空题 1选择题
        //增加填空题
        AddBlock(){
            this.count++;
            this.blockArray.push({type:0, index:this.count, topic:"", content:""})

        },
        //删除填空题
        DelBlock(i){
            //所有选项的index都需要-1
            for(var j=0;j<this.blockArray.length;j++){
                if(this.blockArray[j].index>this.blockArray[i].index){
                    this.blockArray[j].index--;
                }
            }
            for(var j=0;j<this.chooseArray.length;j++){
                if(this.chooseArray[j].index>this.blockArray[i].index){
                    this.blockArray[j].index--;
                }
            }
            //删除填空题数组
            this.count--;
            this.blockArray.splice(i,1);
        },
        //增加选择题
        AddChoose() {
          //字段含义：type题目类型，index题号，topic题目名，choice选项数组，single是否单选
          this.count++;
          this.chooseArray.push({type: 1, index: this.count, topic: "", choice: [], single: false})
        },
        //删除选择题
        DelChoose(i){
            //所有选项的index都需要-1
            for(var j=0;j<this.blockArray.length;j++){
                if(this.blockArray[j].index>this.chooseArray[i].index){
                    this.blockArray[j].index--;
                }
            }
            for(var j=0;j<this.chooseArray.length;j++){
                if(this.chooseArray[j].index>this.chooseArray[i].index){
                    this.chooseArray[j].index--;
                }
            }
            //删除填空题数组
          this.count--;
          this.chooseArray.splice(i, 1);
        },
        //增加选择题选项
        AddChoice(i){
            this.chooseArray[i].choice.push("")
        },
        //删除选择题选项
        DelChoice(i,j){
            this.chooseArray[i].choice.splice(j,1);
        },
        //向后端发送axios请求，保存表单
        SaveForm(){
            //打包数据
            var params={
                formName:this.formName,//表单名称
                count:this.count,//题目数量
                blockArray:this.blockArray,//填空题数组
                chooseArray:this.chooseArray//选择题数组
            }
            //调用接口，保存表单
            saveForm(params).then((response)=>{
                console.log(response);
                this.$message({
                  message: '保存成功',
                  type: 'success'
                });
            }).catch((error)=>{
                console.log(error);
            })
        }
    }
  }
</script>

